<template>
  <div class="search-tag-block">
    <div class="top">
      <div class="title">{{ title }}</div>
      <div class="control">
        <!-- 子组件使用slot标签插槽内容来插入内容替换 -->
        <slot name="control"></slot>
        <!-- <slot name="left"></slot>
        <slot name="right" :count="count"></slot> -->
      </div>
    </div>
    <div class="content">
      <div v-show="show">
        <van-tag
          v-for="item in list"
          :key="item.wordid"
          :name="item.wordid"
          color="#f0f2f5"
          text-color="#000"
          :class="{ hot: item.num > 10000 }"
          >{{ item.keyword }}</van-tag
        >
      </div>
      <van-empty
        v-if="!list.length"
        image-size="0.5rem"
        image="search"
        description="暂无搜索记录"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";

interface IProps {
  title: string;
  getList: () => void;
}
const props = defineProps<IProps>();

// tag列表数据
const list = ref([]);

const show = ref(true);

const initGetList = () => {
  const data = props.getList();
  if (Array.isArray(data)) {
    list.value = data;
  } else {
    data.then((res) => {
      list.value = res;
    });
  }
};

// 控制显示隐藏
const toggle = () => (show.value = !show.value);

onMounted(() => {
  initGetList();
});

// 对外暴露
defineExpose({
  refresh: initGetList,
  toggle
});
</script>

<style lang="scss">
.search-tag-block {
  padding: 16px;
  .top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 15px;
    .title {
      color: #232326;
    }
    .control {
      color: #999999;
    }
  }
  .content {
    padding-top: 16px;
    .van-tag {
      margin: 0 8px 8px 0;
    }
    .van-tag.hot {
      color: var(--van-primary-color) !important;
    }
    .van-empty {
      padding: 0;
    }
  }
}
</style>
